<template>
	<view class="info-area">
		<view class="info-list">
			<view class="info-item" v-if='emerList && emerList.length' v-for="(item,index) in emerList" :key="index">
				<view class="item-header">
				</view>
				<view class="item-body">
					<view class="body-top">
						<view>
							<text>{{item.faultTypeName}}</text>
						</view>
						<view>
							<text>{{item.lineName}}</text>
							<text>{{item.staName}}</text>
							<text>{{item.happenTime}}</text>
						</view>
						<view>{{item.content}}</view>
					</view>
					<hr />
					<view class="body-bottm">
						<view>
							<text>接单</text>
							<text>1</text>
					<text>到场</text>
							<text>1</text>
						</view>
						<u-steps :list="emergencyProcess" :current="item.faultLevel" mode="dot" active-color='#00aa47'
							un-active-color="#a2bdc6" class="emer-steps"></u-steps>
					</view>
				</view>
			</view>
		</view>
		<view class="emer-tip">没有更多报警了~</view>
	</view>
</template>

<script>
	export default {
		name: "emergencyList",
		components: {},
		data() {
			return {
				emerList: [],
				emergencyProcess: [{
						name: '告警'
					},
					{
						name: '调度发布'
					},
					{
						name: '指挥发布'
					},
					{
						name: '接警'
					},
					{
						name: '工单'
					},
					{
						name: '徐丹'
					},
					{
						name: '到场'
					},
					{
						name: '现象消除'
					}
				]
			};
		},
		created() {
			this.initList();
		},
		methods: {
			initList() {
				let params = {
					personId: this.getUserId(),
					lineId: "",
					level: "",
					type: "",
					faultId: "",

				};

				this.fetch('GET', this.$store.state.baseEmerUrl + '/emergency/faultList', params, true).then((res) => {
					if (res.returnCode == "2004" && res.data && res.data.length != 0) {

						this.emerList = res.data
						for (let i = 0; i < this.emerList.length; i++) {
							this.emerList[i].happenTime = this.emerList[i].happenTime.substring(0, 19)
							
							if(this.emerList[i].processCode == 2){

							}
						}
						
						
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	/deep/.u-steps .u-steps__item {
		min-width: 88upx;
	}

	/deep/.u-steps__item__text--row {
		span {
			font-size: 24upx;
		}
	}

	.info-list {
		width: 96%;
		margin: 0 auto;

		.info-item {
			box-shadow: -2upx -2upx 2upx rgba(0, 0, 0, 0.05), 2upx 2upx 4upx rgba(0, 0, 0, 0.05);
			border-radius: 3upx;
			background: #e7f5ff;
			margin-bottom: 25upx;

			.item-header {
				width: 100%;
				height: 15upx;
				background-color: #b0d2ff;
				border-radius: 3upx 3upx 0 0;

			}

			.item-body {
				padding: 10upx;
				border-radius: 3upx;

				.body-top {
					margin-bottom: 24upx;

					view:nth-child(1) {
						margin-bottom: 10upx;

						text:first-child {
							font-weight: bolder;
						}

					}

					view:nth-child(2) {
						position: relative;
						margin-bottom: 15upx;
						font-size: 25upx;

						text:first-child {
							margin-right: 35upx;
						}

						text:nth-child(2) {
							font-weight: bold;
						}

						text:nth-child(3) {
							position: absolute;
							right: 10upx;
							color: #81858e;
						}
					}

					view:nth-child(3) {
						font-size: 25upx;
						color: #b2bbc2;
					}


				}

				hr {
					width: 90%;
					margin: 0 auto;
					border: 1px dashed #e0eefb;
				}

				.body-bottm {
					margin-top: 24upx;

					view:nth-child(1) {
						margin-bottom: 20upx;

						text:nth-child(1) {
							color: #a5b1bd;
							margin-right: 10upx;
						}

						text:nth-child(2) {
							margin-right: 60upx;
							color: #6d7b86;
						}

						text:nth-child(3) {
							color: #a5b1bd;
							margin-right: 10upx;
						}

						text:nth-child(4) {
							color: #6d7b86;
						}
					}

					.emer-steps {
						margin-bottom: 30upx;
					}
				}

			}

		}
	}

	.emer-tip {
		margin-top: 40upx;
		text-align: center;
		color: #8a8a8a;
		// font-weight: 600;
		font-size: 34upx;
	}
</style>
